<template>
  <div class="MusicLift">
    <div>
      <p :class="showhide==1?'p':''" @click="getfxyy">发现音乐</p>
      <p :class="showhide==2?'p':''" @click="getsp">视频</p>
      <p :class="showhide==3?'p':''" @click="getpy">朋友</p>
      <p :class="showhide==4?'p':''" @click="getzb">直播</p>
      <p :class="showhide==5?'p':''" @click="getsrfm">私人FM</p>
      <span>我的音乐</span>
      <p>
        <i class="el-icon-sell"></i>
        本地与下载
      </p>
      <p>
        <i class="el-icon-mic"></i>
        最近播放
      </p>
      <div class="cjdg">
        <span @click="changeover">创建歌单<i :class="show==false?'el-icon-caret-right':'el-icon-caret-bottom'"></i></span><i class="el-icon-plus i2"></i>
      </div>
      <p v-show="show">我喜欢的音乐</p>
    </div>
  </div>
</template>

<script>
import Bus from '@/components/eventBus'
export default {
  name: 'MusicLift',
  data() {
    return {
      show: false,
      showhide: 1
    }
  },

  methods: {
    changeover() {
      this.show = !this.show
    },
    //发现音乐
    getfxyy() {
      this.showhide = 1
      //当重新点击发现音乐的时候，如果不是在个性推荐的路由上，就跳转到个性路由上，上面导航样式也跟着变
      Bus.$emit('activeIndex', '1')
      this.$router.push({ path: '/home/recommend' })
    },
    //视频
    getsp() {
      this.showhide = 2
      this.$router.push({ path: '/videoclip/Videolist' })
    },
    //朋友
    getpy() {
      this.showhide = 3
      this.$router.push({ path: '/friend' })
    },
    //直播
    getzb() {
      this.showhide = 4
      this.$router.push({ path: '/streaming' })
    },
    //私人FM
    getsrfm() {
      this.showhide = 5
      this.$router.push({ path: '/Privatefm' })
    }
  },
  created() {
    //接收值，赋值给showhide来控制p类标签的使用
    Bus.$on('getJumptomv', val => {
      this.showhide = val
    })
  }
}
</script>

<style lang="less" scoped>
.MusicLift {
  width: 200px;
  height: 700px;
  border-right: 1px solid rgb(230, 229, 229);
  overflow: hidden;
  .p {
    background-color: rgb(241, 240, 239);
    font-size: 17px;
    font-weight: bold;
    opacity: 0.8;
  }
  p {
    width: 175px;
    margin-left: 10px;
    padding: 8px;
  }
  p:nth-child(1) {
    margin-top: 10px;
  }
  p:nth-child(6) {
    margin-bottom: 10px;
  }
  p:nth-child(8) {
    margin-top: 10px;
  }
  p:hover {
    background-color: rgb(241, 240, 239);
    cursor: pointer;
  }
  span {
    color: rgb(181, 182, 182);
    font-size: 12px;
    margin-left: 18px;
  }
  .cjdg {
    .i2 {
      display: line-block;
      margin-left: 100px;
      color: rgb(15, 14, 14);
      font-size: 16px;
    }
    span {
      i:hover {
        color: rgb(119, 119, 119);
      }
    }
  }
  .cjdg:hover {
    cursor: pointer;
  }
}
</style>